﻿@{
    ViewData["Title"] = "系统监控";
}
<div class="layui-row layui-col-space10">
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">系统信息</div>
            <div class="layui-card-body">
                <script id="tplServerBase" type="text/html">
                    <ul>
                        <li>
                            <span>主机名称 : </span>
                            <span>{{= d.hostName }}</span>
                        </li>
                         <li>
                            <span>操作系统 : </span>
                            <span>{{= d.systemOs }}</span>
                        </li>
                        <li>
                            <span>系统架构 : </span>
                            <span>{{= d.osArchitecture }}</span>
                        </li>
                        <li>
                            <span>CPU核数 : </span>
                            <span>{{= d.processorCount }}</span>
                        </li>
                         <li>
                            <span>运行时长 : </span>
                            <span>{{= d.sysRunTime }}</span>
                        </li>
                        <li>
                            <span>外网地址 : </span>
                            <span>{{= d.remoteIp }}</span>
                        </li>
                         <li>
                            <span>内网地址 : </span>
                            <span>{{= d.localIp }}</span>
                        </li>
                        <li>
                            <span>运行框架 : </span>
                            <span>{{= d.frameworkDescription }}</span>
                        </li>
                         <li>
                            <span>开发环境 : </span>
                            <span>{{= d.environment }}</span>
                        </li>
                        <li>
                            <span>网站目录 : </span>
                            <span>{{= d.wwwroot }}</span>
                        </li>
                         <li>
                            <span>环境变量 : </span>
                            <span>{{= d.stage }}</span>
                        </li>
                    </ul>
                </script>
                <div id="ServerBase" class="layui-padding-3"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">使用信息</div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                        <div id="echarts-cpu" style="width: 100%;height:192px;"></div>
                    </div>
                    <div class="layui-col-md6">
                        <div id="echarts-ram" style="width: 100%;height:192px;"></div>
                    </div>
                </div>
                <script id="tplServerUsed" type="text/html">
                    <ul>
                        <li>
                            <span>内存大小 : </span>
                            <span>{{= d.totalRam }}（{{= d.usedRam }}）</span>
                            <span>可用 : </span>
                            <span>{{= d.freeRam }}</span>
                        </li>
                        <li>
                            <span>启动时间 : </span>
                            <span>{{= d.startTime }}</span>
                        </li>
                         <li>
                            <span>运行时长 : </span>
                            <span>{{= d.runTime }}</span>
                        </li>
                    </ul>
                </script>
                <div id="ServerUsed" class="layui-padding-3"></div>
            </div>
        </div>
    </div>
</div>

<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">程序集信息</div>
            <div class="layui-card-body">
                <script id="tplAssembly" type="text/html">
                    {{#  layui.each(d.list, function(index, item){ }}
                    <span class="layui-badge">
                        {{= item.name }}
                        <i class="layui-font-gray">{{= item.version }}</i>
                    </span>
                    {{#  }); }}
                </script>
                <div id="Assembly" class="layui-padding-3"></div>
            </div>
        </div>
    </div>
</div>

<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">磁盘信息</div>
            <div class="layui-card-body">
                <script id="tplServerDisk" type="text/html">
                    <ul>
                      {{#  layui.each(d.list, function(index, item){ }}
                      <li>
                        <div>磁盘（{{= item.diskName }}）</div>
                        <div class="layui-progress" lay-showpercent="true">
                            <div class="layui-progress-bar layui-bg-blue" lay-percent="{{= item.availablePercent }}%"></div>
                        </div>

                        <div>{{= item.availableFreeSpace }} GB可用,共 {{= item.totalSize }} GB</div>
                      </li>
                    {{#  }); }}
                    </ul>
                </script>
                <div id="ServerDisk" class="layui-padding-3"></div>
            </div>
        </div>
    </div>
</div>

@section scripts {
    <script type="text/javascript">
        layui.use(['echarts', 'http'], function () {
            var $ = layui.jquery,
                echarts = layui.echarts,
                laytpl = layui.laytpl,
                table = layui.table,
                element = layui.element,
                http = layui.http;

            //服务器信息
            function loadServer() {
                //服务器信息
                http.get('/api/sysServer/serverBase', {}, false).then((res) => {
                    var tpl = $('#tplServerBase').html();
                    laytpl(tpl).render(res.result, function (str) {
                        $('#ServerBase').html(str);
                    });
                });
                //磁盘信息
                http.get('/api/sysServer/serverDisk', {}, false).then((res) => {
                    var data = { list: res.result };
                    var tpl = $('#tplServerDisk').html();
                    laytpl(tpl).render(data, function (str) {
                        $('#ServerDisk').html(str);
                        element.render('progress');
                    });
                });

                //程序集信息
                http.get('/api/sysServer/assemblyList', {}, false).then((res) => {
                    var data = { list: res.result };
                    var tpl = $('#tplAssembly').html();
                    laytpl(tpl).render(data, function (str) {
                        $('#Assembly').html(str);
                    });
                });

                //服务器使用信息
                function loadData() {
                    http.get('/api/sysServer/serverUsed', {}, false).then((res) => {
                        echartsCPU.setOption({
                            series: [{ data: [{ name: 'CPU', value: res.result.cpuRate.replace('%', '') }] }]
                        });
                        echartsRam.setOption({
                            series: [{ data: [{ name: '内存', value: res.result.ramRate.replace('%', '') }] }]
                        });
                        //
                        var tpl = $('#tplServerUsed').html();
                        laytpl(tpl).render(res.result, function (str) {
                            $('#ServerUsed').html(str);
                        });
                    });
                }
                var echartsCPU = echarts.init($('#echarts-cpu')[0], 'walden');
                var echartsRam = echarts.init($('#echarts-ram')[0], 'walden');
                var option = {
                    series: [
                        {
                            type: 'gauge',
                            axisLine: {
                                lineStyle: {
                                    width: 30,
                                    color: [
                                        [0.3, '#67e0e3'],
                                        [0.7, '#37a2da'],
                                        [1, '#fd666d']
                                    ]
                                }
                            },
                            pointer: {
                                itemStyle: {
                                    color: 'auto'
                                }
                            },
                            axisTick: {
                                distance: -30,
                                length: 8,
                                lineStyle: {
                                    color: '#fff',
                                    width: 2
                                }
                            },
                            splitLine: {
                                distance: -30,
                                length: 30,
                                lineStyle: {
                                    color: '#fff',
                                    width: 4
                                }
                            },
                            axisLabel: {
                                color: 'inherit',
                                distance: 40,
                                fontSize: 10
                            },
                            detail: {
                                valueAnimation: true,
                                formatter: '{value} %',
                                color: 'inherit',
                                fontSize: 20
                            },
                            data: [
                                {
                                    name: '使用率', value: 70
                                }
                            ]
                        }
                    ]
                };
                //
                echartsCPU.setOption(option);
                echartsRam.setOption(option);
                loadData();

                //30秒执行一次
                var interval = 30 * 1000;
                setInterval(function () { loadData() }, interval);
            }

            loadServer();
        });
    </script>
}